<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../../resources/css/bootstrap/bootstrap.min.css"/>
    <link rel="stylesheet" href="../../resources/font-awesome/css/font-awesome.css"/>
    <link href="../../resources/css/style.css" rel="stylesheet">
	
	
    <link rel="stylesheet" href="../../resources/css/plugins/bootstrap-fileinput/css/fileinput.css"/>
	
    <link href="../../resources/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">
</head>
    <body>
    <div id="wrapper">
        <div id="page-wrapper" class="gray-bg">
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
	
    <div class="col-md-6">
        <div class="ibox float-e-margins">
            <div class="ibox-content">
                <form class="form-horizontal m-t" method="get" id="signupForm" novalidate="novalidate">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">用户名：</label>
                        <div class="col-sm-9">
                            <input id="username" name="username" class="form-control" type="text" aria-required="true" aria-invalid="true">
                            <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 只能使用数字、字母、下划线组合</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">密码：</label>
                        <div class="col-sm-9">
                            <input id="password" name="password" class="form-control" type="password" >
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">确认密码：</label>
                        <div class="col-sm-9">
                            <input id="confirm_password" name="confirm_password" class="form-control" type="password">
                            <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 请再次确认您的密码</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">E-mail：</label>
                        <div class="col-sm-9">
                            <input id="email" name="email" class="form-control" type="email">
                        </div>
                    </div>
					
					<div class="form-group">
						<label class="col-sm-3 control-label">性别：</label>
						<div class="col-sm-9">
							<div class="radio radio-info radio-inline">
								<input type="radio" id="inlineRadio1" value="男" name="radioInline" checked />
								<label for="inlineRadio1"> 男 </label>
							</div>
							<div class="radio radio-inline">
								<input type="radio" id="inlineRadio2" value="女" name="radioInline">
								<label for="inlineRadio2"> 女 </label>
							</div>
						</div>
					</div>
					
					<div class="form-group">
						<label class="col-sm-3 control-label">身份证号码：</label>
						<div class="col-sm-9">
							<input id="identityCard"  name="identityCard" class="form-control" type="text" />
						</div>
					</div>					
					
                <div class="form-group">
                    <label for="asdbby" class="col-sm-3 control-label">爱好：</label>
                    <div class="col-md-9">
                        <div class="checkbox checkbox-primary">
							<input type="checkbox" name="asdbby" value="Music"  checked />
							<label>音乐</label>
                        </div>
						
                        <div class="checkbox checkbox-success">
							<input type="checkbox" name="hobby" value="Game" checked />
							<label>游戏 </label>
                        </div>
						
						<div class="checkbox checkbox-warning checkbox-inline">
                            <input type="checkbox" id="inlineCheckbox1" value="option1" checked />
                            <label for="inlineRadio1">篮球 </label>
						</div>
						
						<div class="checkbox checkbox-danger checkbox-inline">
                            <input type="checkbox" id="inlineCheckbox2" value="option2" checked />
                            <label for="inlineCheckbox2">游泳</label>
						</div>
						
						<div class="checkbox  checkbox-inline">
                            <input type="checkbox" id="inlineCheckbox3" value="option3" checked />
                            <label for="inlineCheckbox3">跑步 </label>
						</div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="sel" class="col-sm-3 control-label">Select：</label>
                    <div class="col-md-9">
                        <select multiple="" id="sel" name="sel" class="form-control">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="file-1" class="col-sm-3 control-label">头像：</label>
                    <div class="col-md-9">
                        <input id="file-1" type="file" multiple class="file" name="userfile" data-overwrite-initial="false" data-min-file-count="2">
                    </div>
                </div>		
				
				<div class="hr-line-dashed"></div>
				
                    <div class="form-group">
                        <div class="col-sm-9 col-sm-offset-3">
                            <div class="checkbox checkbox-info">
								<input type="checkbox" id="agree" name="agree" checked />  
								<label>我已经认真阅读并同意《正全易推使用协议》</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-9 col-sm-offset-10">
                            <button class="btn btn-primary" id="reset">重置</button>
                            <button class="btn btn-primary btn-sub" type="submit" style="display: none">提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
	
</div>
</div></div></div>	
    </body>

<script src="../../resources/js/jquery-2.1.1.js"></script>
<script src="../../resources/js/plugins/validate/jquery.validate.min.js"></script>

<script src="../../resources/js/bootstrap/bootstrap.min.js"></script>

<script src="../../resources/js/plugins/bootstrap-fileinput/fileinput.js"></script>
<script src="../../resources/js/plugins/bootstrap-fileinput/locales/zh.js"></script>
<script src="validateExt.js"></script>
<script type="text/javascript">
    function formSub(){
        return $('.btn-sub').submit();;
    }
    $("#file-1").fileinput({
        uploadUrl: 'fileupload',
        language: 'zh',
        allowedFileExtensions : ['jpg','png'],
        overwriteInitial: false,
        maxFileSize: 6000,
        maxFilesNum: 10,
		showClose : false,
        slugCallback: function(filename) {
            return filename.replace('(', '_').replace(']', '_');
        }
    });
    $(function(){
    $.validator.setDefaults({
        highlight: function(e) {
            $(e).closest(".form-group").removeClass("has-success").addClass("has-error")
        },
        success: function(e) {
            e.closest(".form-group").removeClass("has-error").addClass("has-success")
        },
        errorElement: "span",
        errorPlacement: function(e, r) {
            e.appendTo(r.is(":radio") || r.is(":checkbox") ? r.parent().parent().parent() : r.parent())
        },
        errorClass: "help-block m-b-none",
        validClass: "help-block m-b-none"
    });

        $().ready(function() {
            var e = "<i class='fa fa-times-circle-o'></i> ";
            var validator=$("#signupForm").validate({
                submitHandler:function(form){
                    alert("submitted");
                    form.submit();
                },
                rules: {
                    username: {
                        required: true,
                        byteRangeLength: [10, 25]
                    },
                    password: {
                        required: true,
                        minlength: 5
                    },
                    confirm_password: {
                        required: true,
                        minlength: 5,
                        equalTo: "#password"
                    },
                    identityCard:{//身份证验证
                        required: true,
                        isIdCardNo: true
                    },
                    email:{
                        required: true,
                        email: !0
                    },
                    topic:{
                        required: "#newsletter:checked",
                        minlength: 2
                    },
                    agree: "required"
                },
                messages: {
                    firstname: e + "请输入你的姓",
                    lastname: e + "请输入您的名字",
                    username: {
                        required: e + "请输入您的用户名",
                        minlength: e + "用户名必须两个字符以上"
                    },
                    password: {
                        required: e + "请输入您的密码",
                        minlength: e + "密码必须5个字符以上"
                    },
                    confirm_password: {
                        required: e + "请再次输入密码",
                        minlength: e + "密码必须5个字符以上",
                        equalTo: e + "两次输入的密码不一致"
                    },
                    identityCard:{
                        required: e + "请输入身份证号码",
                        isIdCardNo: e +"请输入15位或18位身份证号码"//身份证验证
                    },
                    email: e + "请输入您的E-mail",
                    agree: {
                        required: e + "必须同意协议后才能注册",
                        element: "#agree-error"
                    }
                }
            });
            $("#reset").click(function() {
                validator.resetForm();
            });
        });


})		
</script>
</html>